Žiniatinklio darbuotojai: lygiagretaus apdorojimo išlaisvinimas JavaScript

Šiandieniniame žiniatinklio kūrimo kraštovaizdyje itin svarbu kurti reaguojančias ir našias žiniatinklio programas. Vartotojai tikisi sklandaus bendravimo ir greito įkėlimo laiko. Tačiau JavaScript, būdamas vienasriegis, kartais gali sunkiai susidoroti su skaičiavimo intensyvumo reikalaujančiomis užduotimis, neužšaldydamas vartotojo sąsajos. Čia į pagalbą ateina žiniatinklio darbuotojai, siūlydami būdą vykdyti scenarijus foniniuose sriegiuose, efektyviai įgalinant lygiagretų apdorojimą JavaScript.

Kas yra žiniatinklio darbuotojai?

Žiniatinklio darbuotojai yra paprasta priemonė žiniatinklio turiniui vykdyti scenarijus foniniuose sriegiuose. Jie leidžia atlikti užduotis lygiagrečiai su pagrindiniu žiniatinklio programos vykdymo sriegiu, neužblokuojant vartotojo sąsajos. Tai ypač naudinga užduotims, kurios reikalauja daug skaičiavimų, pvz., vaizdų apdorojimas, duomenų analizė arba sudėtingi skaičiavimai.

Pagalvokite apie tai taip: turite pagrindinį virėją (pagrindinį sriegį), kuris ruošia patiekalą (žiniatinklio programą). Jei virėjas turi viską daryti pats, tai gali užtrukti ilgai, o klientai (vartotojai) gali tapti nekantrūs. Žiniatinklio darbuotojai yra tarsi pagalbiniai virėjai, kurie gali atlikti konkrečias užduotis (foninis apdorojimas) nepriklausomai, leisdami pagrindiniam virėjui sutelkti dėmesį į svarbiausius patiekalo ruošimo aspektus (vartotojo sąsajos atvaizdavimas ir vartotojo sąveika).

Kodėl verta naudoti žiniatinklio darbuotojus?

Pagrindinis žiniatinklio darbuotojų naudojimo privalumas yra pagerintas žiniatinklio programos našumas ir jautrumas. Perkeldami skaičiavimo intensyvumo reikalaujančias užduotis į foninius sriegius, galite užkirsti kelią pagrindinio sriegio blokavimui, užtikrindami, kad vartotojo sąsaja išliks sklandi ir reaguos į vartotojo sąveiką. Štai keletas pagrindinių privalumų:

• Pagerintas jautrumas: Apsaugo nuo vartotojo sąsajos užšalimo ir palaiko sklandžią vartotojo patirtį.
• Lygiagretus apdorojimas: Įgalina lygiagretų užduočių vykdymą, pagreitindamas bendrą apdorojimo laiką.
• Patobulintas našumas: Optimizuoja išteklių panaudojimą ir sumažina apkrovą pagrindiniam sriegiui.
• Supaprastintas kodas: Leidžia suskaidyti sudėtingas užduotis į mažesnius, lengviau valdomus vienetus.

Žiniatinklio darbuotojų naudojimo atvejai

Žiniatinklio darbuotojai tinka įvairioms užduotims, kurioms gali būti naudingas lygiagretus apdorojimas. Štai keletas įprastų naudojimo atvejų:

• Vaizdų ir vaizdo įrašų apdorojimas: Filtrų taikymas, vaizdų dydžio keitimas arba vaizdo įrašų kodavimas / dekodavimas. Pavyzdžiui, nuotraukų redagavimo svetainė galėtų naudoti žiniatinklio darbuotojus, kad pritaikytų sudėtingus filtrus vaizdams, nesulėtindama vartotojo sąsajos.
• Duomenų analizė ir skaičiavimas: Sudėtingų skaičiavimų, duomenų manipuliavimo ar statistinės analizės atlikimas. Apsvarstykite finansų analizės įrankį, kuris naudoja žiniatinklio darbuotojus, kad realiuoju laiku atliktų skaičiavimus su akcijų rinkos duomenimis.
• Foninis sinchronizavimas: Duomenų sinchronizavimo su serveriu tvarkymas fone. Įsivaizduokite bendradarbiavimo dokumentų rengyklę, kuri naudoja žiniatinklio darbuotojus, kad automatiškai išsaugotų pakeitimus serveryje netrukdydama vartotojo darbo eigos.
• Žaidimų kūrimas: Žaidimo logikos, fizikos modeliavimo ar AI skaičiavimų tvarkymas. Žiniatinklio darbuotojai gali pagerinti sudėtingų naršyklėje veikiančių žaidimų našumą tvarkydami šias užduotis fone.
• Kodo sintaksės paryškinimas: Kodo paryškinimas kodo rengyklėje gali būti CPU intensyvumo reikalaujanti užduotis. Naudojant žiniatinklio darbuotojus, pagrindinis sriegis išlieka jautrus, o vartotojo patirtis žymiai pagerėja.
• Spindulio sekimas ir 3D atvaizdavimas: Šie procesai yra labai daug skaičiavimo reikalaujantys ir idealūs kandidatai vykdyti darbuotojo viduje.

Kaip veikia žiniatinklio darbuotojai

Žiniatinklio darbuotojai veikia atskiroje visuotinėje apimtyje nuo pagrindinio sriegio, o tai reiškia, kad jie neturi tiesioginės prieigos prie DOM ar kitų sriegiams nesaugių išteklių. Ryšys tarp pagrindinio sriegio ir žiniatinklio darbuotojų pasiekiamas perduodant pranešimus.

Žiniatinklio darbuotojo kūrimas

Norėdami sukurti žiniatinklio darbuotoją, tiesiog sukurkite naują Worker objektą, perduodami darbuotojo scenarijaus kelią kaip argumentą:

            const worker = new Worker('worker.js');
            

              
                Copy
              
            
          

worker.js yra atskiras JavaScript failas, kuriame yra kodas, kuris bus vykdomas foniniame sriegyje.

Bendravimas su žiniatinklio darbuotoju

Ryšys tarp pagrindinio sriegio ir žiniatinklio darbuotojo vykdomas naudojant postMessage() metodą ir onmessage įvykių apdorojimo priemonę.

Pranešimo siuntimas žiniatinklio darbuotojui:

            worker.postMessage({ task: 'calculateSum', numbers: [1, 2, 3, 4, 5] });
            

              
                Copy
              
            
          

Pranešimo gavimas žiniatinklio darbuotojui:

            self.onmessage = function(event) {
  const data = event.data;
  if (data.task === 'calculateSum') {
    const sum = data.numbers.reduce((a, b) => a + b, 0);
    self.postMessage({ result: sum });
  }
};
            

              
                Copy
              
            
          

Pranešimo gavimas pagrindiniame sriegyje:

            worker.onmessage = function(event) {
  const data = event.data;
  console.log('Result from worker:', data.result);
};
            

              
                Copy
              
            
          

Žiniatinklio darbuotojo nutraukimas

Kai baigsite darbą su žiniatinklio darbuotoju, svarbu jį nutraukti, kad atlaisvintumėte išteklius. Tai galite padaryti naudodami terminate() metodą:

            worker.terminate();
            

              
                Copy
              
            
          

Žiniatinklio darbuotojų tipai

Yra skirtingų tipų žiniatinklio darbuotojų, kurių kiekvienas turi savo konkretų naudojimo atvejį:

• Specializuoti darbuotojai: Susieti su vienu scenarijumi ir prieinami tik tam scenarijui. Jie yra labiausiai paplitęs žiniatinklio darbuotojų tipas.
• Bendrinami darbuotojai: Pasiekiami keliems scenarijams iš skirtingų šaltinių. Jiems reikia sudėtingesnio nustatymo ir jie tinka scenarijams, kai keli scenarijai turi dalytis tuo pačiu darbuotoju.
• Aptarnavimo darbuotojai: Veikia kaip tarpiniai serveriai tarp žiniatinklio programų, naršyklės ir tinklo. Jie dažnai naudojami talpyklai ir palaikymui neprisijungus. Aptarnavimo darbuotojai yra specialus žiniatinklio darbuotojų tipas su pažangiomis galimybėmis.

Pavyzdys: Vaizdų apdorojimas su žiniatinklio darbuotojais

Iliustruokime, kaip žiniatinklio darbuotojai gali būti naudojami vaizdų apdorojimui fone atlikti. Tarkime, kad turite žiniatinklio programą, kuri leidžia vartotojams įkelti vaizdus ir pritaikyti filtrus. Sudėtingo filtro taikymas pagrindiniame sriegyje gali užšaldyti vartotojo sąsają, todėl vartotojo patirtis bus prasta. Žiniatinklio darbuotojai gali padėti išspręsti šią problemą.

HTML (index.html):

            <input type="file" id="imageInput">
<canvas id="imageCanvas"></canvas>
            

              
                Copy
              
            
          

JavaScript (script.js):

            const imageInput = document.getElementById('imageInput');
const imageCanvas = document.getElementById('imageCanvas');
const ctx = imageCanvas.getContext('2d');

const worker = new Worker('imageWorker.js');

imageInput.addEventListener('change', function(e) {
  const file = e.target.files[0];
  const reader = new FileReader();

  reader.onload = function(event) {
    const img = new Image();
    img.onload = function() {
      imageCanvas.width = img.width;
      imageCanvas.height = img.height;
      ctx.drawImage(img, 0, 0);
      const imageData = ctx.getImageData(0, 0, img.width, img.height);

      worker.postMessage({ imageData: imageData, width: img.width, height: img.height });
    };
    img.src = event.target.result;
  };
  reader.readAsDataURL(file);
});

worker.onmessage = function(event) {
  const processedImageData = event.data.imageData;
  ctx.putImageData(processedImageData, 0, 0);
};
            

              
                Copy
              
            
          

JavaScript (imageWorker.js):

            self.onmessage = function(event) {
  const imageData = event.data.imageData;
  const width = event.data.width;
  const height = event.data.height;

  // Apply a grayscale filter
  for (let i = 0; i < imageData.data.length; i += 4) {
    const avg = (imageData.data[i] + imageData.data[i + 1] + imageData.data[i + 2]) / 3;
    imageData.data[i] = avg; // Red
    imageData.data[i + 1] = avg; // Green
    imageData.data[i + 2] = avg; // Blue
  }

  self.postMessage({ imageData: imageData });
};
            

              
                Copy
              
            
          

Šiame pavyzdyje, kai vartotojas įkelia vaizdą, pagrindinis sriegis siunčia vaizdo duomenis žiniatinklio darbuotojui. Žiniatinklio darbuotojas vaizdo duomenims pritaiko pilkos spalvos atspalvių filtrą ir siunčia apdorotus duomenis atgal į pagrindinį sriegį, kuris tada atnaujina drobę. Tai užtikrina, kad vartotojo sąsaja reaguos net ir su didesniais vaizdais bei sudėtingesniais filtrais.

Geriausios žiniatinklio darbuotojų naudojimo praktikos

Norėdami efektyviai naudoti žiniatinklio darbuotojus, apsvarstykite šias geriausias praktikas:

• Laikykite darbuotojų scenarijus paprastus: Venkite į darbuotojų scenarijus įtraukti nereikalingų bibliotekų ar kodo, kad sumažintumėte darbuotojų kūrimo ir inicializavimo išlaidas.
• Optimizuokite ryšį: Sumažinkite duomenų kiekį, perduodamą tarp pagrindinio sriegio ir darbuotojų. Kai įmanoma, naudokite perkeliamus objektus, kad išvengtumėte duomenų kopijavimo.
• Tvarkykite klaidas elegantiškai: Įdiekite klaidų tvarkymą darbuotojų scenarijuose, kad išvengtumėte netikėtų trikdžių. Naudokite onerror įvykių apdorojimo priemonę, kad sugautumėte klaidas ir atitinkamai jas registruotumėte.
• Nutraukite darbuotojų veiklą, kai baigsite: Nutraukite darbuotojų veiklą, kai jų nebereikia, kad atlaisvintumėte išteklius.
• Apsvarstykite sriegių telkinį: Labai CPU intensyvioms užduotims apsvarstykite sriegių telkinio įdiegimą. Sriegių telkinys pakartotinai naudos esamas darbuotojų egzempliorius, kad išvengtų pakartotinio darbuotojų objektų kūrimo ir naikinimo išlaidų.

Žiniatinklio darbuotojų apribojimai

Nors žiniatinklio darbuotojai siūlo didelių privalumų, jie taip pat turi tam tikrų apribojimų:

• Ribota prieiga prie DOM: Žiniatinklio darbuotojai negali tiesiogiai pasiekti DOM. Jie gali bendrauti su pagrindiniu sriegiu tik perduodant pranešimus.
• Nėra prieigos prie Window objekto: Žiniatinklio darbuotojai neturi prieigos prie window objekto ar kitų visuotinių objektų, pasiekiamų pagrindiniame sriegyje.
• Failų prieigos apribojimai: Žiniatinklio darbuotojai turi ribotą prieigą prie failų sistemos.
• Derinimo iššūkiai: Derinti žiniatinklio darbuotojus gali būti sunkiau nei derinti kodą pagrindiniame sriegyje. Tačiau šiuolaikiniai naršyklių kūrėjų įrankiai teikia paramą žiniatinklio darbuotojų derinimui.

Alternatyvos žiniatinklio darbuotojams

Nors žiniatinklio darbuotojai yra galingas įrankis lygiagrečiam apdorojimui JavaScript, yra alternatyvių būdų, kuriuos galite apsvarstyti, atsižvelgdami į savo konkrečius poreikius:

• requestAnimationFrame: Naudojamas animacijoms ir kitiems vaizdiniams atnaujinimams planuoti. Nors jis nesuteikia tikro lygiagretaus apdorojimo, jis gali padėti pagerinti suvokiamą našumą suskaidant užduotis į mažesnes dalis, kurios gali būti vykdomos naršyklės perkrovimo ciklo metu.
• setTimeout ir setInterval: Naudojami užduotims planuoti, kad jos būtų vykdomos po tam tikro uždelsimo arba reguliariais intervalais. Šie metodai gali būti naudojami užduotims perkelti iš pagrindinio sriegio, tačiau jie nesuteikia tikro lygiagretaus apdorojimo.
• Asinchroninės funkcijos (async/await): Naudojamos rašyti asinchroninį kodą, kurį lengviau skaityti ir prižiūrėti. Asinchroninės funkcijos nesuteikia tikro lygiagretaus apdorojimo, tačiau jos gali padėti pagerinti jautrumą, leidžiant pagrindiniam sriegiui toliau vykdyti, laukiant, kol bus baigtos asinchroninės operacijos.
• OffscreenCanvas: Ši API teikia drobę, kuri gali būti atvaizduojama atskirame sriegyje, todėl animacijos ir grafikos intensyvios operacijos yra sklandesnės.

Išvada

Žiniatinklio darbuotojai yra vertingas įrankis žiniatinklio programų našumui ir jautrumui pagerinti, įgalinant lygiagretų apdorojimą JavaScript. Perkeldami skaičiavimo intensyvumo reikalaujančias užduotis į foninius sriegius, galite užkirsti kelią pagrindinio sriegio blokavimui, užtikrindami sklandžią ir reaguojančią vartotojo patirtį. Nors jie turi tam tikrų apribojimų, žiniatinklio darbuotojai yra galinga technika žiniatinklio programų našumui optimizuoti ir patrauklesnei vartotojo patirčiai kurti.

Žiniatinklio programoms tampant vis sudėtingesnėmis, lygiagretaus apdorojimo poreikis tik didės. Suprasdami ir naudodami žiniatinklio darbuotojus, kūrėjai gali kurti našesnes ir jautresnes programas, kurios atitinka šiuolaikinių vartotojų poreikius.

Tolesnis mokymasis

• MDN žiniatinklio darbuotojų API
• HTML5 Rocks: Paprastas darbuotojo pavyzdys
• JavaScript.info: Žiniatinklio darbuotojai